<!DOCTYPE html>
<html>

	<!-- Mirrored from www.zi-han.net/theme/hplus/table_bootstrap.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:03 GMT -->

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>H+ 后台主题UI框架 - Bootstrap Table</title>
		<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
		<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
		<link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
		<link href="css/animate.min.css" rel="stylesheet">
		<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">

	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5> 
        <ol class="breadcrumb br-0">
            <li><a href="javascript:void(0)">系统管理</a></li>
            <li class="active">${tableNote}</li>
        </ol>
    </h5>
					<div class="ibox-tools">
						<a class="collapse-link">
							<i class="fa fa-chevron-up"></i>
						</a>
						<!--		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li>
                                        <a href="#">选项1</a>
                                    </li>
                                    <li>
                                        <a href="#">选项2</a>
                                    </li>
                                </ul>-->
						<a class="close-link">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-md-12">
							<div class="form-horizontal">
								<div class="col-md-4 col-sm-6 col-xs-12">
									<form class="form-group" data-queryType="search">
										<label class="hidden-xs col-md-3 col-sm-4 control-label">查询：</label>
										<div class="col-md-9 col-sm-8">
											<div class="input-group">
												<input type="text" name="searchKey" class="form-control" placeholder="请输入搜索关键字">
												<span class="input-group-btn">
                            					 <button class="btn btn-primary queryform_btn"  type="button">搜索</button>
                          				   </span>
											</div>
										</div>
									</form>
								</div>
									<div class="col-md-6 col-sm-12 col-xs-12">
									<form class="form-group"  data-queryType="filter" data-filterAttrName="date">
										<label class="hidden-xs col-md-2 col-sm-2 control-label">时间：</label>
										<div class="col-md-4 col-sm-4 col-xs-12">
											<input name="filterStartValue" placeholder="开始日期" class="form-control" id="start">
										</div>
										<div class="col-md-5 col-sm-4 col-xs-12">
											<div class="input-group">
												<input name="filterEndValue" placeholder="结束日期" class="form-control " id="end">
												<span class="input-group-btn">
                            					 <button class="btn btn-primary queryform_btn" type="button">过滤</button>
                           					  </span>
											</div>
										</div>

									</form>
									</div>
								<div class="col-md-12 col-sm-12 col-xs-12">
									<form class="form-group" data-queryType="screen">
										<label class="hidden-xs col-md-1 col-sm-2 control-label">筛选：</label>
										<div class="col-md-2 col-sm-3 col-xs-12">
											<select class="form-control" name="map[one]">
													<option>复杂筛选</option>
												</select>
										</div>
										<div class="col-md-2 col-sm-3 col-xs-12">
											<select class="form-control" name="map[two]">
													<option>复杂筛选</option>
												</select>
										</div>
										<div class="col-md-3 col-sm-4 col-xs-12">
											<div class="input-group">
													<select class="form-control" name="map[three]">
													<option>复杂筛选</option>
												</select>
												<span class="input-group-btn">
                             <button class="btn btn-primary queryform_btn"  type="button">筛选</button>
                             </span>
											</div>
										</div>
										<div class="col-md-4 col-sm-10  col-xs-10 ">
											<button type="button" class="btn btn-primary ">简单筛选</button>
											<button type="button" class="btn btn-primary">简单筛选</button>
											<button type="button" class="btn btn-primary">简单筛选</button>
										</div>


									</form>
									
								</div>
					

							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-md-12">
							<table id="tb_departments" >

							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		</div>
		<script src="/admin/frame/jquery/jquery-1.9.1.min.js"></script>
		<script src="/admin/frame/bootstrap/js/bootstrap.min.js"></script>
		<script src="/admin/frame/bootstrap-table/bootstrap-table.min.js"></script>
		<script src="/admin/frame/bootstrap-table/bootstrap-table-mobile.min.js"></script>
		<script src="/admin/frame/bootstrap/js/bootstrap.min.js"></script>
		<script src="/admin/js/content.min.js?v=1.0.0"></script>
		<script src="/admin/frame/layer/laydate/laydate.js"></script>
		<script src="/admin/js/myPlug.js"></script>
	</body>
		<script>
            $(function () {
                dateAssemblyInit();// 初始化日期控件
                var oTable = new TableInit();
                oTable.Init();//初始化表格
                oTable.queryInit();//初始化查询事件绑定
            });
            var TableInit = function () {
                var oTableInit = {};
                //初始化Table
                oTableInit.Init = function () {
                    $('#tb_departments').bootstrapTable({
                        url: '/Test/Test', //请求后台的URL（*）
                        method: 'get', //请求方式（*）
                        contentType: 'application/json',
                        toolbar: '#toolbar', //工具按钮用哪个容器
                        striped: false, //是否显示行间隔色
                        cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                        pagination: true, //是否显示分页（*）
                        sortable: true, //是否启用排序
                        sortOrder: "asc", //排序方式
                        sortName: "id",//排序字段
                        queryParams: oTableInit.queryParams,//传递参数（*）
                        sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                        pageNumber: 1, //初始化加载第一页，默认第一页
                        pageSize: 10, //每页的记录行数（*）
                        pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                        search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                        strictSearch: false,
                        showColumns: false, //是否显示所有的列
                        showRefresh: false, //是否显示刷新按钮
                        minimumCountColumns: 2, //最少允许的列
                        clickToSelect: true, //是否启用点击选中行
                      //  height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                        uniqueId: "id", //每一行的唯一标识，一般为主键列
                        showToggle: false, //是否显示详细视图和列表视图的切换按钮
                        cardView: false, //是否显示详细视图
                        detailView: false, //是否显示父子表
                        detailFormatter: function (index, row) { //详情格式化
                            return row.toString();
                        },
                        paginationPreText: "上一页",
                        paginationNextText: "下一页",
                        showFooter: false, //是否显示页脚
                        rowStyle: function (row, index) {
                            return {};
                        },
                        columns: [
                            {
                                field: 'id',
                                title: '编号',
                                align: "center",
                                sortable: true,
                                sortName: "id",
                                formatter: function (value, row, index) {
                                    return value;

                                }
                            },
                            {
                                field: 'username',
                                title: '用户名 ',
                                align: "center",
                                sortable: true,
                                sortName: "name",
                                formatter: function (value, row, index) {

                                    var str="<a class='tabjump' href='/Admin/Ssc/SscLine/sleectLineLoss?lineId="+row.id+"'>"+value+"</a>"
                                    return str;

                                }
                            },
                            {
                                field: 'phone',
                                title: '联系电话',
                                align: "center",
                                sortable: true,
                                sortName: "image",
                                formatter: function (value, row, index) {
                                    return value;

                                }
                            },
                            {
                                field: 'id',
                                title: '操作',
                                formatter: function (value, row, index) {
                                    return '<a href="/Admin/Ssc/SscLine/delete?id=' + value + '" class="btn btn-default btn-xs nojump confirm" data-callback="$.mytable.removeRow" data-iscue="true"><i class="iconfont ft-12" style="line-height:12px;color:red;">&#xe7de;</i> 删除</a>  ' +
                                        '<a href="/Admin/Ssc/SscLine/saveOrUpdatePage?id=' + value + '" class="btn btn-default btn-xs modaljump"  type="button" ><i class="iconfont ft-12"  style="line-height:12px;color:rgb(230,126,34);">&#xe630;</i>编辑</a>';
                                }
                            }]

                    });
                };
                //获取查询参数
                oTableInit.queryParams = function (params) {
					var querfrom=$("form[data-isquery='current_query']").eq(0);
                    var temp = querfrom.serializeJson();
                    temp.pageSize = params.limit;
                    temp.currentPage = params.offset / params.limit + 1;
                    temp.sort = params.sort;
                    temp.order = params.order;
                    temp.type = querfrom.attr("data-querytype");
                    if(temp.type==undefined)
					{
					    temp.type="search";
					}
                    if(temp.type=="filter")
					{
					    temp.filterAttrName=querfrom.attr("data-filterAttrName");
					}
                   // console.log("表单参数")
                  // console.log(temp);
                    return temp;
                };
				oTableInit.queryInit=function () {
                    $("button.queryform_btn").on("click", function () {
                        $("form").attr("data-isquery","");
                       var querfrom= $(this).parents("form").eq(0).attr("data-isquery","current_query");
                        $('#tb_departments').bootstrapTable('refresh');

                    });

                }
                return oTableInit;
            };
//定义日期选择器插件
function dateAssemblyInit() {
            var start = {
                elem: "#start",
                format: "YYYY/MM/DD",
                min: "2017-01-01 00:00:01",
                max: laydate.now(),
                istime: false,
                istoday: false,
                choose: function(datas) {
                    end.min = datas;
                    end.start = datas
                }
            };
            var end = {
                elem: "#end",
                format: "YYYY/MM/DD",
                min: "2017-01-01 00:00:01",
                max: laydate.now(),
                istime: false,
                istoday: false,
                choose: function(datas) {
                    start.max = datas
                }
            };
            laydate(start);
 			laydate(end);
			}
		</script>
</html>
